<template>
  <div class="box1">
    <div class="header-photo">
      <img style="width:100%"  referrerpolicy="no-referrer"
       src="https://eimg.smzdm.com/202011/20/5fb729d64543d6465.jpg" mode="" />
      <Upload class="upload" action="https://www.camwork.site/uploadHandler.ashx" >
        <Button icon="ios-cloud-upload-outline">上传封面</Button>
      </Upload>
    </div>

    <div class="title">
      <input
        v-on:input="changeTitle"
        type="text"
        v-model="title"
        placeholder="请输入标题(不超过20字)"
      />
    </div>
    <mavon-editor
      class="markdown"
      @change="transformHtml"
      :subfield="true"
      :value="value"
    ></mavon-editor>
    <div class="bottom1">
      <div><span>发布设置</span></div>
      <div class="addtag">
        <span style="margin-right: 20px">添加标签:</span>
        <Input
          :disabled="readonly"
          @on-enter="calAge"
          v-model="tag"
          placeholder="输入完成后回车"
          style="width: 300px"
        />
        <div style="margin-left: 80px; margin-top: 10px">
          <Tag
            v-for="(item, index) in tagList"
            :key="index"
            closable
            @on-close="handleClose(index)"
            >{{ item }}</Tag
          >
        </div>
      </div>
      <div class="switch">
        <span>是否为原创</span>
        <i-switch v-model="switch1" @on-change="change" />
        <span style="color:#3380EE;cursor: pointer" @click="value4 = true">《优测社区运营规则》</span>
      </div>
       <div class="submit">
              <Button  type="default" size="large">保存</Button>
               <Button  type="primary" size="large">发布文章</Button>
       </div>
 
    </div>
    <phone :context="valueHtml" class="phone"></phone>

    <div
      :class="
        isPhotoListBox == true ? 'photo-list-box' : 'photo-list-close-box'
      "
    >
      <img
        v-show="isPhotoListBox"
        referrerpolicy="no-referrer"
        src="https://a.zdmimg.com/202011/10/5faa6f1ed4a1c5841.jpg_fo742.jpg"
        alt=""
      />
      <img
        v-show="isPhotoListBox"
        referrerpolicy="no-referrer"
        src="https://a.zdmimg.com/202011/10/5faa6f1ed4a1c5841.jpg_fo742.jpg"
        alt=""
      />
      <div style="cursor: pointer" @click="closePhotoList">
        {{ isPhotoListBox == true ? "收起图片库" : "展开图片库" }}
      </div>
    </div>
    <!-- <BackTop></BackTop> -->
    <!-- 弹出协议 -->
    <div>
      <div @click.stop="value4 = false" v-if="value4" class="cover">
        <div @click.stop="value4 = true" class="cover-son" v-html="rule">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import marked from "marked";
import phone from "./phone.vue";
export default {
  data() {
    return {
      value: `【写作说明】：为了文章能够更好的达到审核要求并在第一时间发布，您可以通过底部提示栏的提示信息，了解审核和奖励规则以及文章的写作建议，请根据规则和建议完成您的写作。TIPS：标题和系列标题文字要求不少于5个汉字，正文插入图片数量不少于1张。

【模板说明】：您可以参考以下模板，晒出您的购买的好商品，也可以自主发挥创作消费相关的内容。（Ps：以上段落一定要删掉哦~）

## 购买理由

（你可以说下自己的购买需求、对比经历、最终选择理由）


  

## 外观展示

（找一个光线充足的地方，多角度拍摄美美哒的照片，在这里展示商品的外观图）


  

## 使用感受 

（你可以选择简单谈下商品的使用感受，当然也可以进行详细的性能测试，如手机可以测试相机、续航等等）


  

## 总结

（这里你可以分几点来说说商品的优点、缺点，这样能够更快速明了地帮助到值友们）`,
      rule: `<h1>社区指导原则</h1>

<p>综述</p>

<p>自建站以来，“什么值得买”一直致力于为大家提供优质稳定的服务，并高度重视社区的良好氛围。为了规范用户行为，维护社区氛围和用户的权益，更好地为大家服务，“什么值得买”的管理团队及授权的管理员（以下统称“站方”）将根据本《社区指导原则》（以下简称“本规则”）中的条款对在“什么值得买”注册的用户及发布在“什么值得买”网站内各频道的信息和内容进行管理。用户需严格遵守本规则，理性讨论，共同维护良好的社区氛围。</p>

<p>“什么值得买”尊重并保护本站注册用户的合法权利，但是对于违反国家法律法规、违反社会主义核心价值观及本站规定（以下简称“违规行为”）的情况，站方有权对相关账号及发布在“什么值得买”的内容进行处理，处理方式包括但不限于对用户发布的内容进行更改或删除、暂停或终止用户使用“什么值得买”各项服务等。对于伤害社区氛围的行为，多数情况下“什么值得买”会先发出警告并给予用户改正自己不当行为的机会，但不表示“什么值得买”在采取任何措施前必须首先发出警告。</p>

<p>“什么值得买”希望为广大值友营造一个和谐平等、畅所欲言的社区；搭建一个有识之士能够提供专业建议，小白用户可以虚心求教的平台。值友们能够客观真实地分享自己的心得体会，用户能够就不同观点互相包容理解，使我们的社区充满正能量。</p>

<p>“什么值得买”欢迎值友们就产品本身、使用感受进行友好交流，分享体验；宽容和理性地对待不同的看法、喜好和意见；尊重他人的隐私并共同维护用户个人信息安全。不欢迎针对种族、国家、民族、宗教、性别、年龄、职业、地缘、性取向、生理特征等的歧视和仇恨言论；不欢迎不雅词句、人身攻击、故意骚扰；不欢迎色情、激进时政、意识形态方面的话题。</p>

<h3>（一）用户行为规范</h3>

<h4>1.账号、头像、个人简介等账号信息的规定</h4>

<p>用户在注册“什么值得买”账号时，应当遵守法律法规、社会主义制度、国家利益、公民合法权益、公共秩序、社会道德风尚和信息真实性等七条底线，不得设置包含以下内容的账号信息：</p>

<ul><li>1.1违反国家法律法规的；</li><li>1.2用户ID为程序批量注册的；</li><li>1.3包含人身攻击性质内容的；</li><li>1.4用户头像、ID、个人简介中出现QQ号、微信号、旺旺号、店铺地址、微博、公众号、邮箱等可认定为是联系方式的；</li><li>1.5包含“官方”“小编”“内部消息”等容易引发误会的词汇或与管理员ID相似的；</li><li>1.6包含未经授权的注册商标、企业名称等容易引发他人误解甚至侵犯其他主体合法权利的；</li><li>1.7包含其他非法信息或“什么值得买”认为不宜使用的信息的。</li></ul>

<h4>2.用户站内发布内容的规定</h4>

<p>用户不得发布含有以下内容的信息，或从事以下行为：</p>

<h5>2.1违反法律法规：发布违反法律法规，危害国家及社会安全的信息，主要表现为：</h5>

<ul><li>2.1.1反对宪法所确定的基本原则的；</li><li>2.1.2危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的；</li><li>2.1.3损害国家荣誉和利益的；</li><li>2.1.4宣扬恐怖主义、极端主义的；</li><li>2.1.5煽动民族仇恨、民族歧视，破坏民族团结的；</li><li>2.1.6破坏国家宗教政策，宣扬邪教和封建迷信的；</li><li>2.1.7散布谣言，扰乱社会秩序，破坏社会稳定的；</li><li>2.1.8散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的；</li><li>2.1.9侮辱或者诽谤他人，侵害他人合法权益的；</li><li>2.1.10调侃恶搞自然灾害、重大事故等灾难的；</li><li>2.1.11美化侵略者和侵略战争，恶意篡改党史国史，亵渎英雄烈士，消解主流价值观的；</li><li>2.1.12传授犯罪方法或宣扬美化犯罪份子和犯罪行为的；</li><li>2.1.13发布违法网络结社活动信息和涉嫌非法社会组织的信息；</li><li>2.1.14未经授权使用他人商号、商标和标识的；</li><li>2.1.15侵犯他人著作权、抄袭他人作品的；</li><li>2.1.16宣传伪科学或违反科学常识的内容，制造、发布谣言误导公众，引发群体焦虑和不安的；</li><li>2.1.17展示丑陋、粗俗、下流的风俗，宣扬拜金主义和奢靡腐朽的生活方式的；</li><li>2.1.18发布或宣扬自残、自杀或能够引发人身危险等内容，或其他引起反感、不适或容易诱发模仿行为的；</li><li>2.1.19可能引发未成年人模仿不安全行为和违反社会公德行为、诱导未成年人不良嗜好等的；</li><li>2.1.20其他含有法律、行政法规禁止的内容或违反公序良俗的言论及行为。</li></ul>

<h5>2.2不友善行为：不尊重“什么值得买”用户及其所贡献内容的行为，主要表现为：</h5>

<ul><li>2.2.1轻蔑：贬低、轻视他人及其劳动成果；</li><li>2.2.2诽谤：捏造、散布虚假事实，损害他人名誉；</li><li>2.2.3臆测：主观地对他人写作背景、动机、身份进行含有贬义的猜测；</li><li>2.2.4嘲讽：以比喻、夸张、侮辱性的手法对他人或其行为进行揭露或描述，以此来激怒他人；</li><li>2.2.5挑衅：以不友好的方式激怒他人，意图使对方对自己的言论作出回应，蓄意制造事端；</li><li>2.2.6羞辱：贬低他人的能力、行为、生理或身份特征，让对方难堪；</li><li>2.2.7谩骂：以不文明的语言对他人进行负面评价；</li><li>2.2.8歧视：针对他人的民族、种族、宗教、性取向、性别、年龄、地域、职业、生理特征等身份或者归类的攻击；</li><li>2.2.9威胁：许诺以不良的后果来迫使他人服从自己的意志；</li><li>2.2.10带节奏：以主观性的观念表达或为体现自我价值，进行煽动性的或带有偏见的批判，发表不道德、煽动性、攻击性内容的行为，蓄意引发冲突或损害他人利益的行为；</li><li>2.2.11贬损：无理由、无依据的进行贬损、攻击或发布负面信息；</li><li>2.2.12诋毁：发布传播或煽动他人进行诋毁、造谣、诽谤、污蔑、辱骂“什么值得买”，辱骂小编工作及网站运营，对“什么值得买”造成负面影响、涉及网站内部机密的内容、言论；</li><li>特别说明：</li><li>目前以下话题容易引发争论并升级为人身攻击：<ul><li>（1）品牌喜好：不同品牌拥有不同的粉丝，在产品上我们希望用户能够理性地讨论产品优劣，不希望继而升级为对其他用户的审美、判断、选择进行质疑或者攻击等；</li><li>（2）商品产地：不论商品正在哪一个国家生产，我们都希望用户能够包容并尊重其他用户的喜好和选择；</li><li>（3）用户地域：请勿对不同地域、同一城市外来人口、不同行业的其他用户或者人品进行攻击；</li></ul></li><li>希望值友能够理性对待上述以及类似的敏感话题，给予他人更多的包容。</li></ul>

<h5>2.3发布不安全信息，包括可能对他人财产安全或信息安全造成损失的内容，主要表现为：</h5>

<ul><li>2.3.1发布含有钓鱼网站、木马、病毒网站链接及相关内容的行为；</li><li>2.3.2发布含有潜在危险、窃取用户隐私等相关内容的行为；</li><li>2.3.3发布影响用户体验或被大量用户举报的未经审核的外链、二维码及其他多媒体等内容；</li></ul>

<h5>2.4恶意行为：滥用产品功能，进行影响用户体验，危及社区安全及损害他人权益的行为，主要表现为：</h5>

<ul><li>2.4.1冒充他人，通过头像、用户名等个人信息暗示自己与他人或机构相等同或有关联的行为；</li><li>2.4.2骚扰他人，包括但不限于无视他人明确或暗示拒绝的态度，以评论等方式对他人反复发送重复或者相似的诉求的行为；</li><li>2.4.3内容中泄露他人隐私信息的行为，包括但不限于真实姓名、电话、住址、身份证号、他人照片、性取向、生理及心理缺陷、财产状况以及社会关系等；</li><li>2.4.4以马甲的形式重复参与同一活动或者参与同一话题的回复；</li><li>2.4.5刷屏或灌水，造成其他用户无法正常阅读的行为，如同一ID连续三层及以上或不同文章中出现3条及以上无意义或类似的内容；</li><li>2.4.6发布或传播不正当获得、使用或转移账号财产的内容，严重影响其他用户体验，扰乱正常社区秩序的行为；</li><li>2.4.7使用第三方程序或机器等谋求不正当曝光的行为；</li><li>2.4.8恶意爆料、提报商品百科等投稿行为，包括但不限于内容为广告、人身攻击言论等；</li><li>2.4.9发布含有竞品信息等相关内容的行为；</li><li>2.4.10蓄意对抗行为，包括但不限于使用变体、谐音等隐晦表达方式规避相关法律法规或本规则限制，明知相关行为违反法律法规或本规则仍然多次发布等。</li><li>2.4.11恶意举报行为，包括但不限于为达到个人不合理甚至是违法的目的，颠倒是非，向站方反映不实内容或不存在的问题，或者夸大事实、制造虚假证据等；</li></ul>

<h5>2.5发布垃圾营销信息：以推广曝光为目的，发布影响用户体验、扰乱社区秩序的内容或进行相关行为，主要表现为：</h5>

<ul><li>2.5.1发布信息引导“什么值得买”平台用户至其他平台（如：微博、微信、QQ、知乎、今日头条等）进行售卖、团购、代购等交易行为，为自己牟取利益的行为；</li><li>2.5.2通过非正常途径进行爆料，或者在评论区产生水军、恶意刷屏、散布商业招揽信息等，损害或可能损害“什么值得买”或用户权益的行为；</li><li>2.5.3商家冒充正常网友进行账号注册，继而爆料、提交原创文章或提报商品百科，在评论区产生水军、诋毁同类其他品牌产品、恶意举报正常用户言论、刷赞等影响社区正常运营秩序的行为；</li><li>2.5.4账号之间虚假地互动，发布干扰社区秩序的推广内容及相关交易；</li><li>2.5.5使用严重影响用户体验的违规手段进行恶意营销，包括但不限于不规范转载他人内容同时加入推广营销内容，发布包含欺骗性的恶意营销内容等；</li></ul>

<h5>2.6发布不实信息，不实信息主要表现为：</h5>

<ul><li>2.6.1整体失实：事件本身系子虚乌有；</li><li>2.6.2捏造细节：通过编造事件的局部信息使整个事件被扭曲；</li><li>2.6.3图文不符：通过错误的图文搭配误导他人；</li><li>2.6.4夸大事实：在描述中对事实夸大其词，误导他人；</li><li>2.6.5信息残缺：隐藏部分事实，以不完整的信息误导他人；</li></ul>

<h5>2.7发布其他非正常信息：发布影响用户体验、扰乱社区秩序的信息或相关行为，主要表现为：</h5>

<ul><li>2.7.1重复发布相似内容（包括但不限于提问、回答、发布广告等内容）；</li><li>2.7.2多个账号合作谋求不正当曝光（包括但不限于刷券、爆料、投稿）；</li><li>2.7.3发布“代购”“凑单”“转让”“送券”等疑似黄牛交易的信息；</li><li>2.7.4发布包含“QQ号”“微信号”“旺旺号”“邮箱”“手机号”等联系方式，疑似黄牛交易的行为；</li><li>特别说明：不允许出现联系方式的原因如下：<ul><li>（1）用户私下交易，风险较大，不少用户反馈有些骗子欺骗善良的网友，导致货不对版，付款不发货，货品有问题等；</li><li>（2）联系方式会泄露用户隐私；</li></ul></li><li>2.7.5诱导投票或关注，如通过点赞抽奖、集赞更新等形式诱导投票或者诱导关注；</li><li>2.7.6其他破坏社区良好氛围，令其他用户不悦或难堪的行为；</li></ul>

<h3>（二）社区管理</h3>

<h4>1.违规行为处理流程</h4>

<p>站方通过主动发现和接受用户举报两种方式发现违规行为。用户可以使用“什么值得买”评论区内对话框下的「举报」功能对涉嫌违规的行为和用户进行举报，也可以向【违法和不良信息举报电话：4008108106-9 】及【违法和不良信息举报邮箱：service@smzdm.com】发送举报信息。违规的信息由“什么值得买”站方根据本规则直接处理。用户知悉并同意，站方有权根据技术规则通过检测验证等方式，结合用户行为轨迹、发布信息等情况综合判断用户账号行为是否构成违规，并采取相关措施予以处理。所有处理措施所依据的数据及信息（包括但不限于账号操作记录、发布内容等）均以站方平台后台记录为准。且站方有权对用户使用站内各项服务的行为及信息进行审查、监督及处理，包括但不限于用户信息（账号信息、个人信息等）、发布内容（位置、文字、图片、音频、视频、商标、专利、出版物等）、用户行为（构建关系、@信息、评论、参与话题、参与活动、营销信息发布、举报投诉等）等范畴。</p>

<h4>2.违规行为处理范围</h4>

<p>违规处理方式：内容处理、财产处理和账号处理。</p>

<ul><li>2.1内容处理：删除、屏蔽评论、投稿，断开链接等。</li><li>2.2财产处理： 回收账号内的所有财产（包括但不限于钱包余额、金币、积分等）。</li><li>2.3账号处理：警告、限期改正、禁言和封禁。</li></ul>

<p>警告是指包括但不限于通过电话、站内通知（站内信、站内评论等可触达用户的方式）等渠道给予口头、书面等形式的告诫。</p>

<p>限期改正是指要求违规用户在指定的期限内改正其违规行为，如要求用户对涉嫌违规的账号头像、ID或个人简介等注册信息或言论、文章进行修改。</p>

<p>禁言是指禁止发布部分或任何动态，包括但不限于禁止发布评论、禁止发布投稿等，但可正常登录“什么值得买”。站方将视行为的情节严重情况，决定给予违规用户禁言一定时间（具体时间可能为1-365天不等）或永久禁言的处理措施，禁言期限届满后账号将恢复正常使用。</p>

<p>封禁是指被封禁账号无法登陆和使用“什么值得买”所有服务。如用户被禁言次数较多，账号将直接封禁封禁是指被封禁账号一定期限乃至永久无法登录和使用“什么值得买”所有服务（包括但不限于发布爆料、账号注销、钱包提现等功能和服务）。如用户被禁言次数较多，账号将直接封禁。</p>

<h4>3.申诉方式及渠道</h4>

<p>如果您认为站方的判定有误，请发送您的账号昵称、申诉理由至<a href="https://www.smzdm.com/faq">客服</a>，由专人处理您的申诉。</p>

<h4>4.特别说明</h4>

<p>如果您遭受人身攻击或发现任何违法或不良信息，请您点击举报按钮或联系我们，站方会尽快处理您的举报，相互攻击只会加剧矛盾；</p>

<h4>意见反馈</h4>

<p>“什么值得买”站方可以随着社区管理经验的不断丰富，出于维护“什么值得买”社区氛围和秩序的目的，不断完善本规则。 如果“什么值得买”用户对本规则有任何建议或意见，可以点击<a href="https://www.smzdm.com/feedback/">「用户反馈」</a>，向“什么值得买”进行反馈。</p><br /><br />`,
      valueHtml: "",
      title: "",
      isPhotoListBox: true,
      photoListCloseBox: "photo-list-close-box",
      photoListBox: "photo-list-box",
      show: true,
      tag: "",
      tagList: [],
      readonly: false,
      switch1: false,
      value4: false,
    };
  },
  components: {
    phone,
  },
  created() {
    this.transformHtml();
  },
  methods: {
    changeTitle(e) {
      //   console.log(this.title);
      this.valueHtml = this.valueHtml + this.title;
    },
    transformHtml(e, reder) {
      console.log(e);
      this.valueHtml = `<h1>${this.title}</h1><br />` + reder;
      console.log(this.valueHtml);
    },
    closePhotoList() {
      this.isPhotoListBox = !this.isPhotoListBox;
    },
    handleClose(index) {
      for (var i = 0; i < this.tagList.length; i++) {
        if (i == index) {
          this.tagList.splice(index, 1);
        }
      }
      if (this.tagList.length < 5) {
        this.readonly = false;
      }
    },
    calAge() {
      // console.log(this.tag)
      if (this.tag != null) {
        this.tagList.push(this.tag);
        this.tag = null;
      }
      if (this.tagList.length >= 4) {
        this.readonly = true;
      }
    },
    change(status) {
      console.log(status);
    },
  },
};
</script>

<style lang="scss" scoped>

.box1 {
  // display: flex;
  // flex-direction: column;
  // justify-content: flex-start;
  // align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 20px auto;
  width: 880px;
  height: 1500px;
}
.phone {
  position: fixed;
  top: 80px;
  left: 50%;
  margin-left: 480px;
}
.markdown {
  height: 2000px;
  width: 880px;
}
.title {
  width: 880px;
  height: 100px;
  margin-bottom: 20px;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
  input {
    width: 880px;
    height: 100px;
    font-size: 30px;
    padding: 30px;
    letter-spacing: 3px;
    font-weight: bold;
    color: rgb(82, 80, 80);
      // padding-bottom: 10px;
      // background-color: red;
    background: none;
    outline: none;
    border: none;
  }
  input:focus {
    border: none;
  }
}
.header-photo {
  width: 880px;
  height: auto;
  margin-bottom: 10px;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  .upload{
    position: absolute;
    top: 40%;
    left: 50%;
    margin-left: -60px;
  }
}
.bottom1 {
  width: 880px;
  height: 400px;
  margin-top: 20px;
  margin-bottom: 20px;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
  text-align: left;
  box-sizing: border-box;
  padding: 20px;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  // width: 880px;
  // height: 200px;
  // margin-bottom: 10px;
  // background-color: red;
  // box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
  .addtag {
    margin-top: 20px;
  }
}
.photo-list-box {
  width: 200px;
  height: auto;
  padding: 10px;
  position: fixed;
  top: 80px;
  left: 50%;
  margin-left: -650px;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
  img {
    margin-bottom: 10px;
  }
}
.photo-list-close-box {
  width: 200px;
  height: 40px;
  padding: 10px;
  position: fixed;
  top: 80px;
  left: 50%;
  margin-left: -650px;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
}
.submit {
  width: 300px;
  height: 50px;
  // position: fixed;
  // top: 700px;
  // left: 50%;
  margin-bottom: 10px;
  margin-left: 600px;
  Button{
    margin-left: 20px;
  }
}
.switch {
  margin-top: 20px;
  span {
    margin-right: 10px;
  }
}
.cover {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: calc(100vh);
  background-color: rgba(48, 48, 48, 0.555);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.cover-son {
  width: 900px;
  height: 700px;
  background-color: #fff;
  padding: 40px;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  text-align: left;
  overflow-y:scroll;
}
</style>
